import React, { PureComponent } from "react";
import { Flex, Icon } from "antd-mobile";
import s from "./index.scss";
import AxFooter from 'components/Footer'
import AxHeader from 'components/AxHeader'
import Calendar from 'antd/lib/Calendar';
import Spin from 'antd/lib/Spin';

import sfzPng from 'assets/images/sfz.png'
import pwdPng from 'assets/images/pwd.png'
import accountPng from 'assets/images/account.png'
import risk_iconPng from 'assets/images/risk_icon.png'
// import isPaymentPng from 'assets/images/isPayment.png'
import {hashHistory} from 'React-Router'
import {callApi} from 'app/utils'
import Modal from 'antd/lib/Modal';


export default class extends PureComponent {
    constructor(props) {
        super(props);
        this.state = {
            dialogTitle:'提示',
            btnStr:'确定',
            visible: false,
            contentStr:'成功',
            bankSuccess:true,
            bankName:'',
            realName:'',
            accountId:'',
        };
        this.setPwd = this.setPwd.bind(this)
        this.linkToPayment = this.linkToPayment.bind(this)
        this.showModal = this.showModal.bind(this)
        this.handleOk = this.handleOk.bind(this)
        this.handleCancel = this.handleCancel.bind(this)
    }
    showModal() {
        
      }
      handleOk() {
        console.log('点击了确定');
        this.setState({
          visible: false,
        });
      }
      handleCancel(e) {
        console.log(e);
        this.setState({
          visible: false,
        });
      }
    setPwd(){
        let userData = JSON.parse(localStorage.getItem("userData"))
        var getToken = {
            token: userData.token
        };
        if(userData.authFlag==0){
            hashHistory.push('/my/bindBankCard')
        }else{
            callApi('/account/paypassword',getToken,"POST").then((data)=>{
                location.href = data.data.ret_url;
            })
        }
       
    }
    linkToPayment(){
        var getToken = {
            token: JSON.parse(localStorage.getItem("userData")).token
        };
        callApi('/account/payment/auth',getToken,"POST").then((data)=>{
            location.href = data.data.ret_url;
        })
    }

    componentDidMount() { 
        if (sessionStorage.getItem('routeMsg') != "" && sessionStorage.getItem('routeMsg') != null) {
            var routeMsg = JSON.parse(sessionStorage.getItem('routeMsg'))
            if (routeMsg.state == 2) {
             
                   if(sessionStorage.getItem('glRoute')=='realNameAuthNotify'){
                           
                            this.setState({
                                dialogTitle:'routeMsg.msg',
                                btnStr:'确定',
                                visible: true,
                                contentStr:routeMsg.msg,
                                bankName:routeMsg.bankName,
                                realName:routeMsg.realName,
                                accountId:routeMsg.accountId,
                                bankSuccess:true
                            })
                   }else if(sessionStorage.getItem('glRoute')=='setPayPwdNotify'){
                            this.setState({
                                dialogTitle:'提示',
                                btnStr:'确定',
                                visible: true,
                                contentStr:routeMsg.msg,
                                bankSuccess:false,
                            })
                   }else if(sessionStorage.getItem('glRoute')=='resetPayPwdNotify'){
                            this.setState({
                                dialogTitle:'提示',
                                btnStr:'确定',
                                visible: true,
                                bankSuccess:false,
                                contentStr:routeMsg.msg
                            })
                   }
                

             
            }
            if (routeMsg.state == 1) {
                this.setState({
                    dialogTitle:'提示',
                    btnStr:'确定',
                    visible: true,
                    bankSuccess:false,
                    contentStr:routeMsg.msg
                })
               
            }
            if(sessionStorage.getItem("glUnBindCard") == 0){
                this.setState({
                    dialogTitle:'提示',
                    btnStr:'确定',
                    visible: true,
                    bankSuccess:false,
                    contentStr:'解绑银行卡成功！'
                })
            }
            sessionStorage.removeItem('routeMsg')
            sessionStorage.removeItem("glRoute");
            sessionStorage.removeItem('glUnBindCard')
        }

       

    }

    render() {
        let { info } = this.props
        let str
        console.log(info)
        if (JSON.stringify(info) != '{}') {
            str =
                <Flex className={`${s.oneBox}`} direction="column">
                    <div className={`${s.item}`}>
                        <Flex.Item className={`${s.left} flex5`}>
                            <img src={sfzPng} />存管账户
                        </Flex.Item>
                        {info.authFlag == '1' ? <Flex.Item onClick={()=>{
                            hashHistory.push({pathname:'/my/bankCard',query:{flag:1}})
                        }} className={`${s.right} flex5`}>
                            已开通<Icon type="right" />
                        </Flex.Item> : <Flex.Item className={`${s.right} flex5`} onClick={()=>{
                            hashHistory.push({pathname:'/my/bindBankCard'})
                        }} className={`${s.right} flex5`}>
                                <span className={`color26`}>未开通</span><Icon type="right" />
                            </Flex.Item>}
                    </div>
                    <div className={`${s.item}`}>
                        <Flex.Item className={`${s.left} flex5`}>
                            <img src={pwdPng} />{info.payPasswdSetFlag=='1'?'修改交易密码':'设置交易密码'}
                    </Flex.Item>
                        {info.payPasswdSetFlag=='1'?<Flex.Item className={`${s.right} flex5`} onClick={()=>{
                            hashHistory.push({pathname:'/my/editPwd'})
                        }}>
                            <Icon type="right" />
                        </Flex.Item>:<Flex.Item className={`${s.right} flex5`} onClick={this.setPwd}>
                            <Icon type="right" />
                        </Flex.Item>}
                        
                    </div>
                    <div className={`${s.item}`}>
                        <Flex.Item className={`${s.left} flex5`} >
                            <img src={accountPng} />{info.bindCardFlag == '1' ?'查看银行卡':'绑定银行卡'}
                    </Flex.Item>
                        {info.authFlag=='1'? <Flex.Item className={`${s.right} flex5`} onClick={()=>{
                            hashHistory.push({pathname:'/my/bankCard',query:{flag:2}})
                        }}>
                            <Icon type="right" />
                        </Flex.Item>: <Flex.Item className={`${s.right} flex5`} onClick={()=>{
                            hashHistory.push({pathname:'/my/bindBankCard'})
                        }}>
                            <Icon type="right" />
                        </Flex.Item>}
                        
                    </div>
                    <div className={`${s.item}`}>
                        <Flex.Item className={`${s.left} flex5`}>
                            <img src={risk_iconPng} />风险评测
                    </Flex.Item>
                        <Flex.Item className={`${s.right} flex5`} onClick={()=>{
                            hashHistory.push({pathname:'/my/risktest'})
                        }}>
                            <Icon type="right" />
                        </Flex.Item>
                    </div>
                    <div className={`${s.item}`}>
                        <Flex.Item className={`${s.left} flex5`}>
                            <img src={sfzPng} />存管账户
                    </Flex.Item>
                        {info.isPayment == '1' ? <Flex.Item className={`${s.right} flex5`}>
                            已签约<Icon type="right" />
                        </Flex.Item> : <Flex.Item className={`${s.right} flex5`} onClick={this.linkToPayment}>
                                <span className={`color1`}>未签约</span><Icon type="right" />
                            </Flex.Item>}
                    </div>

                </Flex>

        } else {
            str = <Flex style={{ height: '100vh' }} direction="column" justify="center"><Spin tip="正在读取数据..." /></Flex>
        }
        return (
            <div className={`${s.accountManageBox}`}>
                <div>
                    <AxHeader />
                    {str}
                    <Modal title={this.state.dialogTitle} visible={this.state.visible}
                        onOk={this.handleOk} onCancel={this.handleCancel} okText={this.state.btnStr} >
                       {this.state.bankSuccess==true?<div>
                        <div>开户银行:{this.state.bankName}</div>
                        <div>开户姓名:{this.state.realName}</div>
                        <div>电子账户:{this.state.accountId}</div>
                       </div>:<div>{this.state.contentStr}</div>}
                    </Modal>
                </div>
                <AxFooter base={false} />
            </div>
        );
    }
}
